<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'表单'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div class="analyItem">
                <p class="analyItemTit tx-center">单选</p>
                <div class="analyItemCon">
                    <p class="col-md-6">
                        <el-radio v-model="radio" label="1">备选项</el-radio>
                        <el-radio v-model="radio" label="2">备选项</el-radio>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">多选</p>
                <div class="analyItemCon">
                    <p class="col-md-10">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="checked1">备选项1</el-checkbox>
                            <el-checkbox label="checked2">备选项</el-checkbox>
                            <el-checkbox label="选中且禁用" disabled></el-checkbox>
                        </el-checkbox-group>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">输入框</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </p>
                    <p class="col-md-4 ml20">
                        <el-input placeholder="请输入密码" v-model="passworDinput" show-password></el-input>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">远程搜索</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                    </p>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">计数器</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <div class="col-md-6">
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字">
                            </el-input-number>
                        </div>
                    </div>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">选择器</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <el-select v-model="value10" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">级联选择器</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <el-cascader v-model="value11" :options="options" @change="handleChange"></el-cascader>
                    </div>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">日期和时间选择器</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <el-time-select v-model="value12" :picker-options="{start: '08:30', step: '00:15', end: '18:30'}" placeholder="选择时间">
                        </el-time-select>
                    </div>
                    <div class="col-md-4">
                        <el-date-picker v-model="value13" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>

            <div class="analyItem">
                <p class="analyItemTit tx-center">评分</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <el-rate v-model="value14" :colors="colors">
                        </el-rate>
                    </div>
                </div>
            </div>

            <div class="analyItem">
                <p class="analyItemTit tx-center">颜色选择器</p>
                <div class="analyItemCon">
                    <div class="col-md-4">
                        <el-color-picker v-model="color1"></el-color-picker>
                    </div>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">表单验证</p>
                <div class="analyItemCon">
                    <div class="col-md-10">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="活动名称" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动区域" prop="region">
                                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动时间" required>
                                <el-col :span="11">
                                    <el-form-item prop="date1">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-form-item prop="date2">
                                        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="即时配送" prop="delivery">
                                <el-switch v-model="ruleForm.delivery"></el-switch>
                            </el-form-item>
                            <el-form-item label="活动性质" prop="type">
                                <el-checkbox-group v-model="ruleForm.type">
                                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="特殊资源" prop="resource">
                                <el-radio-group v-model="ruleForm.resource">
                                    <el-radio label="线上品牌商赞助"></el-radio>
                                    <el-radio label="线下场地免费"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="活动形式" prop="desc">
                                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">

            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="fl col-md-9"></p>
                    <p class="fr col-md-3">
                        <span class="cLightGray">统计</span>
                        <span class="cGreen fz14 bold">0分</span>
                    </p>
                    <p class="fl"><span class="circlemark circlemark-green">优</span></p>
                </div>
            </div>
            <div class="tx-center">
                <input type="button" class="uiBtn-normal uiBtn-blue" value="确定">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            radio: '1',
            checkList: ['选中且禁用', '备选项1'],
            input: '',
            num: 1,
            passworDinput: '',
            options: [
                {
                    value: 'zhinan',
                    label: '指南',
                    children: [
                        {
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [
                                {
                                    value: 'yizhi',
                                    label: '一致'
                                },
                                {
                                    value: 'fankui',
                                    label: '反馈'
                                },
                                {
                                    value: 'xiaolv',
                                    label: '效率'
                                },
                                {
                                    value: 'kekong',
                                    label: '可控'
                                }
                            ]
                        },
                        {
                            value: 'daohang',
                            label: '导航',
                            children: [
                                {
                                    value: 'cexiangdaohang',
                                    label: '侧向导航'
                                },
                                {
                                    value: 'dingbudaohang',
                                    label: '顶部导航'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'zujian',
                    label: '组件',
                    children: [
                        {
                            value: 'basic',
                            label: 'Basic',
                            children: [
                                {
                                    value: 'layout',
                                    label: 'Layout 布局'
                                },
                                {
                                    value: 'color',
                                    label: 'Color 色彩'
                                },
                                {
                                    value: 'typography',
                                    label: 'Typography 字体'
                                },
                                {
                                    value: 'icon',
                                    label: 'Icon 图标'
                                },
                                {
                                    value: 'button',
                                    label: 'Button 按钮'
                                }
                            ]
                        },
                        {
                            value: 'form',
                            label: 'Form',
                            children: [
                                {
                                    value: 'radio',
                                    label: 'Radio 单选框'
                                },
                                {
                                    value: 'checkbox',
                                    label: 'Checkbox 多选框'
                                },
                                {
                                    value: 'input',
                                    label: 'Input 输入框'
                                },
                                {
                                    value: 'input-number',
                                    label: 'InputNumber 计数器'
                                },
                                {
                                    value: 'select',
                                    label: 'Select 选择器'
                                },
                                {
                                    value: 'cascader',
                                    label: 'Cascader 级联选择器'
                                },
                                {
                                    value: 'switch',
                                    label: 'Switch 开关'
                                },
                                {
                                    value: 'slider',
                                    label: 'Slider 滑块'
                                },
                                {
                                    value: 'time-picker',
                                    label: 'TimePicker 时间选择器'
                                },
                                {
                                    value: 'date-picker',
                                    label: 'DatePicker 日期选择器'
                                },
                                {
                                    value: 'datetime-picker',
                                    label: 'DateTimePicker 日期时间选择器'
                                },
                                {
                                    value: 'upload',
                                    label: 'Upload 上传'
                                },
                                {
                                    value: 'rate',
                                    label: 'Rate 评分'
                                },
                                {
                                    value: 'form',
                                    label: 'Form 表单'
                                }
                            ]
                        },
                        {
                            value: 'data',
                            label: 'Data',
                            children: [
                                {
                                    value: 'table',
                                    label: 'Table 表格'
                                },
                                {
                                    value: 'tag',
                                    label: 'Tag 标签'
                                },
                                {
                                    value: 'progress',
                                    label: 'Progress 进度条'
                                },
                                {
                                    value: 'tree',
                                    label: 'Tree 树形控件'
                                },
                                {
                                    value: 'pagination',
                                    label: 'Pagination 分页'
                                },
                                {
                                    value: 'badge',
                                    label: 'Badge 标记'
                                }
                            ]
                        },
                        {
                            value: 'notice',
                            label: 'Notice',
                            children: [
                                {
                                    value: 'alert',
                                    label: 'Alert 警告'
                                },
                                {
                                    value: 'loading',
                                    label: 'Loading 加载'
                                },
                                {
                                    value: 'message',
                                    label: 'Message 消息提示'
                                },
                                {
                                    value: 'message-box',
                                    label: 'MessageBox 弹框'
                                },
                                {
                                    value: 'notification',
                                    label: 'Notification 通知'
                                }
                            ]
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'menu',
                                    label: 'NavMenu 导航菜单'
                                },
                                {
                                    value: 'tabs',
                                    label: 'Tabs 标签页'
                                },
                                {
                                    value: 'breadcrumb',
                                    label: 'Breadcrumb 面包屑'
                                },
                                {
                                    value: 'dropdown',
                                    label: 'Dropdown 下拉菜单'
                                },
                                {
                                    value: 'steps',
                                    label: 'Steps 步骤条'
                                }
                            ]
                        },
                        {
                            value: 'others',
                            label: 'Others',
                            children: [
                                {
                                    value: 'dialog',
                                    label: 'Dialog 对话框'
                                },
                                {
                                    value: 'tooltip',
                                    label: 'Tooltip 文字提示'
                                },
                                {
                                    value: 'popover',
                                    label: 'Popover 弹出框'
                                },
                                {
                                    value: 'card',
                                    label: 'Card 卡片'
                                },
                                {
                                    value: 'carousel',
                                    label: 'Carousel 走马灯'
                                },
                                {
                                    value: 'collapse',
                                    label: 'Collapse 折叠面板'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'ziyuan',
                    label: '资源',
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components'
                        },
                        {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        },
                        {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }
                    ]
                }
            ],
            value2: null,
            value10: null,
            value11: null,
            value12: null,
            value13: null,
            value14: null,
            value15: null,
            value16: null,
            color1: '#409EFF',
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }
                ],
                date2: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'change'
                    }
                ],
                type: [
                    {
                        type: 'array',
                        required: true,
                        message: '请至少选择一个活动性质',
                        trigger: 'change'
                    }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
            },
            restaurants: [],
            state: '',
            timeout: null
        }
    },
    mounted () {
        this.restaurants = this.loadAll()
    },
    created () {},
    methods: {
        loadAll () {
            return [
                { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
                { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
                { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
                { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
                { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
                { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
                { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
                { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
                { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
                { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
                { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
                { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
                { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
                { 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
                { 'value': 'NONO JUICE  鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
                { 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
                { 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
                { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
                { 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
                { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
                { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
                { 'value': '钱记', 'address': '上海市长宁区天山西路' },
                { 'value': '壹杯加', 'address': '上海市长宁区通协路' },
                { 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
                { 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
                { 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
                { 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
                { 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
                { 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
                { 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
                { 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
                { 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
                { 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
                { 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
                { 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
                { 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
                { 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
                { 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
                { 'value': '浏阳蒸菜', 'address': '天山西路430号' },
                { 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
                { 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
                { 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
                { 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
                { 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
                { 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
                { 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
                { 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
                { 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
            ]
        },
        querySearchAsync (queryString, cb) {
            var restaurants = this.restaurants
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => {
                cb(results)
            }, 3000 * Math.random())
        },
        createStateFilter (queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
            }
        },
        handleSelect (item) {
            console.log(item)
        },
        handleChange (value) {
            console.log(value)
        },
        submitForm (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // eslint-disable-next-line
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm (formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>
